<template>
    <div class="main">
        <div class="container-content" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 2 : 0">
            <!--            调用组件-->
            <card-item :width="width">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                <div>
                    <span class="time">中华崛起 红旗精神 文字之根</span>
                    <span class="content">. . . 革命传统 . . .</span>
                    <span class="address">安阳红旗渠研学基地</span>
                </div>
            </card-item>
        </div>
    </div>
</template>

<script>
    import CardItem from "@/component/cardItem/CardItem";
    export default {
        name: "CourseList",
        components:{
            CardItem
        },
        data(){
            return {
                width:{width: '240px'}
            }
        }
    }
</script>

<style scoped>

    .main:after{
        content:" ";
        display:block;
        clear:both;
    }
    .container-content {
        float: left;
        margin-left: 110px;
        margin-top: 30px;
    }
    .time {
        font-size: 14px;
        font-weight: 600;
        color: rgba(80, 80, 80, 1);
        padding-top:20px;
        padding-bottom: 10px;
        text-align: center;
    }
    .content{
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: rgba(80, 80, 80, 1);
        margin-bottom: 10px;
    }

    .address{
        font-size: 14px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-align: center;
        border-top: rgba(229, 229, 229, 1) solid 1px;
    }
    .image {
        width: 100%;
        height: 160px;
        display: block;
    }
    span{
        display: block;
    }
</style>